<template>
  <div class="content-container">
    <ul class="card">
      <li class="card-item" v-for="item in list" :key="item.id">
        <div class="card-top">
          <div class="left-wrap">
            <div class="left-grey-box" v-if="item.leftLabel == '竞标失败'">
              {{ item.leftLabel }}
            </div>
            <div class="left-box" v-if="item.leftLabel !== '竞标失败'">
              {{ item.leftLabel }}
            </div>
            <div class="right-box" v-if="item.right">
              <span class="orange-text nowrap-text">{{ item.right.text }}</span>
              <img :src="item.right.src" alt="" />
            </div>
          </div>
          <div class="right-wrap">{{ time }}</div>
        </div>
        <div class="card-middle" v-if="item.row">
          <img :src="item.row.src" alt="" />
          <span>{{ item.row.num }}</span>
        </div>
        <Child :childList="item.children" />
      </li>
    </ul>
  </div>
</template>

<script>
import Child from './Child'
export default {
  name: 'Content',
  components: {
    Child
  },
  props: ['list'],
  data () {
    return {
      timer: null,
      time: ''
    };
  },
  created () {
    this.nowTime()
  },
  mounted () {
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    nowTime () {
      this.timer = setInterval(() => {
        const month = new Date().getMonth() + 1
        const day = new Date().getDay()
        let hours = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
        let second =
          new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        this.time = month + '-' + day + ' ' + hours + ':' + second
      }, 1000)
    }
  },
};
</script>

<style scoped>
.content-container {
  padding: 20px;
}
.card-item {
  background: url("../../../../assets/images/card-background.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
  margin: 20px 0;
  padding: 4% 4% 6%;
}
.card-item:first-child .card-top {
  margin-bottom: 10px;
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left-wrap {
  display: flex;
  align-items: center;
}
.left-grey-box,
.left-box {
}
.left-grey-box {
  width: 100%;
  height: 38px;
  line-height: 38px;
  background: url("../../../../assets/images/fail-background.png") no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  padding: 2px 5px;
  text-align: center;
}
.left-box {
  width: 100%;
  height: 38px;
  line-height: 38px;
  background: url("../../../../assets/images/orange-background.png") no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  padding: 2px 5px;
  text-align: center;
}
.right-box {
  display: flex;
  align-items: center;
}
.right-box span,
.right-box img {
  display: block;
}
.right-wrap {
  color: #78868f;
  font-weight: 600;
}
.card-middle {
  height: 30px;
  line-height: 30px;
  width: 100%;
  display: flex;
  padding: 5px 0;
  color: #e04125;
  font-weight: 600;
}
.card-middle span {
  padding: 0 5px;
}
</style>